<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div style="text-align: center;">
         <div style="width: 1000px;height: 600px;margin: 0 auto;">
            <div id="name" style="width: 300px; height: 200px;background-color: red;margin: 0 auto;">
                你好
            </div>
         </div>
       
        <button onclick="changeWidth()">改变宽度</button>
        <button onclick="changeHeight()">改变高度</button>
        <button onclick="changeColor()">改变背景颜色</button>
        <button onclick="changeText()">改变文字</button>
    </div>
</body>

<script>
    var dom =  document.getElementById("name");
    function changeWidth() {
        //通过id获取dom对象
       
       
       //js改变css dom.style.width = 

       console.log(dom.style.width);
       dom.style.width = '400px';
    }


    function changeHeight() {
        //通过id获取dom对象
       
       //js改变css dom.style.width = 

       console.log(dom.style.height);
       dom.style.height = '400px';
    }


    function changeColor() {
        //通过id获取dom对象
       
       //js改变css dom.style.width = 

       console.log(dom.style.backgroundColor);
       dom.style.backgroundColor = 'yellow';
    }


    function changeText() {
        //通过id获取dom对象
       
       //js改变文本 dom.innerHTML = 

       console.log(dom.innerHTML);
       dom.innerHTML = '<h1>嘻嘻嘻嘻</h1>';
    }
</script>
</html>